
<div>
  <h2>模块 <i>modules</i></h2>
  <h3>CommonJS</h3>
    <ul>
      <li>
        模块之于程序，就如同细胞之于生物体，是具有特定功能的组成单元
      </li>
      <li>
        一般谈到 CommonJS其实就是 Node.js 中的版本
      </li>
      <li>
        CommonJS 最初只为服务端设计，直到有了 Browserify--一个运行在 Node.js 环境下的模块打包工具，这意味着客户端的代码也可以遵循 CommonJS 标准编写了
      </li>
      <li>
        不仅如此，借助 NodeJS 的包管理器，npm 开发者还可以获取他人的代码库，或者把自己的代码发布上去供他人使用。这种课共享的传播方式使 CommonJS在前端开发中逐渐流行了起来
      </li>
      <li>
        CommonJS中使用 module.exports 导出。CommonJS 模块内部会有一个 module 对象用于存放当前模块的信息，可以理解成在每个模块的最开始定义了以下对象。var module = {...}  module.exports = {...}
      </li>
      <li>
        为了书写方便，commonjs 也支持另一种简化的导出方式--直接使用exports。在实现效果上，与 module.exports 没有任何的不同。module.exports 在初始化时时一个空对象。使用 exports时要注意，不要直接给 exports赋值，否则会导致其失效
      </li>
      <li>
        另外，要注意导出语句不代表模块的末尾，在 module.exports 或 exports后面的代码依旧可以运行。实际应用中，为了提高可读性，应该将,module.exports 及 exports 语句放在模块的末尾
      </li>
      <li>
        在 CommonJS 中使用 require 进行模块导入
      </li>
      <li>
        require 的模块如果是第一次被加载，这时首先执行该模块，然后导出内容。require 的模块如果曾经被加载过。这时的模块的代码不会再执行，而是直接导出上一次执行后的结果
      </li>
      <li>
        有时候，我们加载一个模块，不需要获取其导出的内容，只是想通过执行它而产生某种作用，比如把它的接口挂在全局对象上，此时直接使用 require 即可 如(require('../test.js'))
      </li>
      <li>
        require函数可以接收表达式，借助这个特性我们可以动态地指定模块加载路径
      </li>
    </ul>

    <h3>ES6 Module</h3>
    <ul>
      <li>es6 modules 也是将每个文件作为一个模块，每个模块拥有自身的作用域</li>
      <li>es6 modules 会自动采用严格模式</li>
      <li>通过 export 或者 esport default 来导出</li>
      <li>使用 export 导出时，可通过 as 关键字对变量重命名</li>
      <li>导入时也可以使用 as 来命名</li>
      <li>模块额默认导出只能有一个</li>
      <li>通过 import 来导入</li>
    </ul>

    <h3>对比两种模块系统</h3>
    <ul>
      <li>commonjs 加载时会运行代码</li>
      <li>ex6 modules 的引入方式方便今后去除未使用的模块，减少资源打包体积</li>
      <li>commonjs 导出的总是一个对象，而 es6 modules可以导出变量，模块</li>
      <li>commonjs 允许修改导入的值，es6 modules不可以</li>
    </ul>

    <h3>AMD</h3>
    <ul>
      <li>AMD 模块标准专注于浏览器端的模块化</li>
      <li>define 去定义一个模块，接受三个参数:当前模块的 id，当前模块的依赖， 导出模块</li>
      <li>异步加载</li>
      <li>加载模块用 reqiure,两个参数：模块和加载成功的回调</li>
    </ul>

    <h3> </h3>
    <ul>
      <li>UMD 不是一种模块系统，他是根据当前全局对象中的值，判断目前支持哪种模块，就使用这种模块系统</li>
    </ul>
</div>